import React from 'react';
import './../../form.less';

import moment from 'moment';
import {Button, Col, Icon, Input, message, Popconfirm, Row, Tooltip, Select} from 'antd';
import BreadcrumbCustom from "../../../common/BreadcrumbCustom";
import OrderTable from "./FastAskOrderTable";

const { Option } = Select;
export default class FastAskOrder extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            pageSize: 5,
            total: 0,
            current: 1,
            visible: false, //新建窗口隐藏
            tutorName: "",
            status:"",
            xyPhoneNum:"",
            price: "",
            dataSource: [],
            isUpdate: false,
            loading: true,
        };
    }

    //搜索条件
    onChangePriceValue = (e) => {
        const value = e.target.value;
        console.log(value)
        this.setState({
            price: value,
        })
    };

    onChangeTutorName = (e) => {
        const value = e.target.value;
        this.setState({
            tutorName: value,
        })
    };

    onChangeXyPhoneNum = (e) => {
        const value = e.target.value;
        this.setState({
            xyPhoneNum: value,
        })
    };

    orderStatusChange=(value)=>{
        this.setState({
            status: value
        })
    }


    pageSizeChange = (current, pageSize) => {
        this.setState({
            pageSize: pageSize,
            current: current
        },() => this.getData())
    }

    getData = () => {
        var url = '/manage/fastAsk/screen'
        const searchCondiction = new Object()
        searchCondiction.pageSize = this.state.pageSize;
        searchCondiction.pageNumber = this.state.current;
        const conditionList = [];
        if(this.state.tutorName){
            const condition = {
                code: "tutorName",
                type: "String",
                operator: 1,
                value: this.state.tutorName
            }
            conditionList.push(condition);
        }
        if(this.state.status){
            const condition = {
                code: "status",
                type: "String",
                operator: 1,
                value: this.state.status
            }
            conditionList.push(condition);
        }
        if(this.state.xyPhoneNum){
            const condition = {
                code: "xyPhoneNum",
                type: "String",
                operator: 1,
                value: this.state.xyPhoneNum
            }
            conditionList.push(condition);
        }
        if(this.state.price){
            const condition = {
                code: "price",
                type: "String",
                operator: 1,
                value: this.state.price
            }
            conditionList.push(condition);
        }
        searchCondiction.conditionList = conditionList;
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(searchCondiction)
        }).then((response) => {
            return response.json()
        }).then((res) => {
            console.log(res)
            if (res.code == 200) {
                this.setState({
                    datasource: res.result.list,
                    total:res.result.total,
                    loading: false
                });
            }else{
                message.error(res.message)
            }
        })
    }

    //渲染
    componentDidMount() {
        this.getData();
    }

    //搜索按钮
    btnSearch_Click = () => {
        this.getData();
    };
    //重置按钮
    btnClear_Click = () => {
        this.setState({
            price: '',
            tutorName: ''
        });
    };
    //取消
    handleCancel = () => {
        this.setState({visible: false});
    };
    //批量删除
    MinusClick = () => {
        this.state.selectedRowKeys.forEach(index => {
            this.onDelete(this.state.datasource[index].id)
        })
    };
    //单个删除
    onDelete = (itemId) => {
        console.log(itemId)
        var url = '/manage/item/' + itemId;
        fetch(url, {
            method: 'DELETE'
        }).then((response) => {
            return response.json()
        }).then((res) => {
            if (res.code == 200) {
                message.success("操作成功")
                this.getData();
            } else {
                message.success("操作失败")
            }
        })
    };
    //点击修改
    // editClick = (key) => {
    //     const order = this.state.datasource.filter(order => order.id == key)[0];
    //     const form = this.form;
    //     form.setFieldsValue({
    //         id:order.id,
    //         phoneNum:order.itemName,
    //         itemPic:item.itemPic,
    //         linkUrl:item.linkUrl
    //     });
    //     this.setState({
    //         visible: true,
    //         isUpdate: true,
    //     });
    // };
    //单选框改变选择
    checkChange = (selectedRowKeys) => {
        this.setState({selectedRowKeys: selectedRowKeys});
    };

    render() {
        return (
            <div>
                <BreadcrumbCustom paths={['首页', '快问订单管理']}/>
                <div className='formBody'>
                    <Row gutter={16}>
                    <Col className="gutter-row" sm={4}>
                            <Input id="tutorName"
                                placeholder="导师姓名"
                                value={this.state.tutorName}
                                onChange={this.onChangeTutorName}
                            />
                        </Col>
                        <Col className="gutter-row" sm={4}>
                            <Input id="price"
                                placeholder="订单金额"
                                value={this.state.price}
                                onChange={this.onChangePriceValue}
                            />
                        </Col>
                        <Col className="gutter-row" sm={4}>
                            <Input id="xyPhoneNum"
                                placeholder="学员手机号码"
                                value={this.state.xyPhoneNum}
                                onChange={this.onChangeXyPhoneNum}
                            />
                        </Col>
                        <Col className="gutter-row" sm={2}>
                            <Select placeholder="订单状态" style={{width:'100%'}} onChange={this.orderStatusChange}>
                                <Option key={0}>{'未回答'}</Option>
                                <Option key={1}>{'已回答'}</Option>
                            </Select>
                        </Col>
                    </Row>
                    <Row gutter={16}>
                        <div className='btnOpera'>
                            <Button type="primary" onClick={this.btnSearch_Click}
                                    style={{marginRight: '10px'}}>查询</Button>
                            <Button type="primary" onClick={this.btnClear_Click}
                                    style={{background: '#f8f8f8', color: '#108ee9'}}>重置</Button>
                        </div>
                    </Row>
                    <OrderTable
                        dataSource={this.state.datasource}
                        checkChange={this.checkChange}
                        onDelete={this.onDelete}
                        loading={this.loading}
                        pageSizeChange={this.pageSizeChange}
                        total={this.state.total}
                        pageSize={this.state.pageSize}
                        current={this.state.current}
                    />
                </div>
            </div>
        )
    }
}